<template>
  <el-dialog v-model="isShow" class="login-dialog" title="注册" width="400">
    <el-form
      ref="ruleFormRef"
      style="max-width: 400px"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="ruleForm.userName" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input v-model="ruleForm.nickName" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" type="password" autocomplete="off" show-password />
      </el-form-item>
      <el-form-item label="确认密码" prop="password2">
        <el-input v-model="ruleForm.password2" type="password" autocomplete="off" show-password />
      </el-form-item>
      <div class="mt-10 login-tip">
        <span class="colorFlag" @click="handleLogin">立即登录</span>
      </div>
      <el-form-item>
        <el-button class="dlBtn" type="primary" @click="submitForm">注册</el-button>
        <el-button class="cacleBtn" @click="resetForm">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { userRegister } from '@/api/user.js';
import { ElMessage } from 'element-plus';
import { reactive, ref, watch } from 'vue';

const emis = defineEmits(['showRegister', 'showLogin']);

const props = defineProps({
  isShowRegister: {
    type: Boolean,
    default: true,
  },
});

const ruleForm = ref({});

const validateEmail = (rule, value, callback) => {
  const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
  if (!value) {
    callback(new Error('请输入邮箱'));
  } else if (!reg.test(value)) {
    callback(new Error('请输入正确的邮箱'));
  } else {
    callback();
  }
};
const validatePass = (rule, value, callback) => {
  const reg = /^(?=.{8})(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d).*$/;
  if (!value) {
    callback(new Error('请输入密码'));
  } else if (!reg.test(value)) {
    callback(new Error('密码长度至少8个字符，且至少包含数字、大小写字母'));
  } else {
    callback();
  }
};

const validatePass2 = (rule, value, callback) => {
  const reg = /^(?=.{8})(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d).*$/;
  if (!value) {
    callback(new Error('请输入密码'));
  } else if (!reg.test(value)) {
    callback(new Error('密码长度至少8个字符，且至少包含数字、大小写字母'));
  } else if (value !== ruleForm.value.password) {
    callback(new Error('两次输入密码不一致!'));
  } else {
    callback();
  }
};

const rules = reactive({
  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  nickName: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
  email: [{ required: true, validator: validateEmail, trigger: 'blur' }],
  password: [{ required: true, validator: validatePass, trigger: 'blur' }],
  password2: [{ required: true, validator: validatePass2, trigger: 'blur' }],
});
const isShow = ref(false);

const ruleFormRef = ref();
// 注册功能
const submitForm = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      const data = {
        ...ruleForm.value,
      };
      delete data.password2;
      const res = await userRegister(data);
      if (res.code === 200) {
        ElMessage({
          message: '注册成功',
          type: 'success',
        });
        handleLogin();
      }
    } else {
      console.log('error submit!');
    }
  });
};
const resetForm = () => {
  isShow.value = false;
  emis('showRegister', false);
};
// 立即登录
const handleLogin = () => {
  emis('showRegister', false);
  emis('showLogin', true);
};
const handleForget = () => {};

watch(
  () => props.isShowRegister,
  (val) => {
    isShow.value = val;
  },
);

watch(
  () => isShow.value,
  (val) => {
    emis('showRegister', val);
  },
);
</script>

<style scoped lang="scss">
.login-box {
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dlBtn,
.cacleBtn {
  width: 47%;
  margin-left: 2.5%;
}
</style>
